<template>
    <div id="report">
        <div class="card-container">
            <el-row :gutter="10">
            <el-form :model="queryParams" label-width="100px" ref="queryForm" :inline="true">
                <el-col :span="19" :offset="0">
                    <el-form-item label="震中地名" prop="locname">
                        <el-input v-model="queryParams.locname" :style="'width:215px'" placeholder="请输入震中地名" clearable
                            size="small" @keyup.enter.native="handleQuery" />
                    </el-form-item>

                    <el-form-item label="发震时间" prop="oritime">
                        <el-select v-model="queryParams.oritime" clearable :style="'width:215px'" placeholder="请选择发震时间">
                            <el-option :value="item.value" :label="item.lable" v-for="(item, index) in options"
                                :key="index + 'date'">
                            </el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item label="发震震级" prop="level">
                        <el-select v-model="queryParams.level" clearable :style="'width:215px'" placeholder="请选择所属项目">
                            <el-option :value="item.value" :label="item.lable" v-for="(item, index) in options1"
                                :key="index + 'date'">
                            </el-option>
                        </el-select>
                    </el-form-item>

                </el-col>
                <el-col :span="5" :offset="0">
                    <el-form-item>
                        <el-button  icon="el-icon-search" size="mini" @click="handleQuery">搜索
                        </el-button>
                        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
                    </el-form-item>
                </el-col>
            </el-form>
        </el-row>
        </div>
       
        <div class="card-container">
            <el-table :data="earthquakeList" :row-class-name="tableRowClassName">
                <el-table-column prop="msgId" align="center" show-overflow-tooltip label="消息发布ID" min-width="150" />
                <el-table-column prop="msgType" align="center" show-overflow-tooltip label="消息类型" min-width="100">
                    <template slot-scope="scope">
                        <dict-tag :options="dict.type.sys_report_type"
                            :value="scope.row.msgType ? scope.row.msgType : 'null'" />
                    </template>
                </el-table-column>
                <!-- <template slot-scope="scope">
                  <dict-tag :options="dict.type.sys_msg_type" :value="scope.row.msgType ? scope.row.msgType : '-'" />
                </template> -->
                <!-- <el-table-column prop="sendTime" align="center" show-overflow-tooltip label="消息发布时间" min-width="180" />
              <el-table-column prop="msgSource" align="center" show-overflow-tooltip label="消息来源" min-width="100" /> -->
                <el-table-column prop="eewId" align="center" show-overflow-tooltip label="事件ID" min-width="100" />
                <!-- <el-table-column prop="producer" align="center" show-overflow-tooltip label="消息生产者" min-width="100" /> -->
                <el-table-column prop="oritime" align="center" show-overflow-tooltip label="发震时间" min-width="180" />
                <el-table-column prop="locname" align="center" show-overflow-tooltip label="震中地名" min-width="100" />
                <el-table-column prop="longitude" align="center" show-overflow-tooltip label="经度" min-width="80" />
                <el-table-column prop="latitude" align="center" show-overflow-tooltip label="纬度" min-width="80" />
                <el-table-column prop="focdepth" align="center" show-overflow-tooltip label="震源深度" min-width="80" />
                <el-table-column prop="magnitude" align="center" show-overflow-tooltip label="震级" min-width="80" />
                <!-- <el-table-column prop="receiveTime" align="center" show-overflow-tooltip label="消息接收时间" min-width="180" /> -->
                <!-- <el-table-column align="center" min-width="150" label="操作">
                <template slot-scope="scope">
                  <el-button type="text" @click="handleRespon(scope.row)">响应</el-button>
                  <el-button type="text" @click="handleMessage(scope.row)">消息</el-button>
                  <el-button type="text" @click="handleReceive(scope.row)">回复</el-button>
                </template>
              </el-table-column> -->
            </el-table>
            <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
                :limit.sync="queryParams.pageSize" @pagination="getList" />
        </div>
    </div>
</template>

<script>
import { getEarthquakeQuickReport } from '@/api/earthquakeinfo/report.js'
import moment from 'moment';
export default {
    dicts: [
        "sys_log_type",
        "sys_report_type"
    ],
    data() {
        return {
            earthquakeList: [],
            total: 0,
            queryParams: { pageNum: 1, pageSize: 10, locname: null, oritime: null, level: null, startTime: null, endTime: null },
            options: [
                {
                    lable: '近七天',
                    value: 'lastWeekRange',
                },
                {
                    lable: '近一个月',
                    value: 'lastMonthRange',
                },
                {
                    lable: '近三个月',
                    value: 'last3MonthsRange',
                },
                {
                    lable: '近半年',
                    value: 'last6MonthsRange',
                },
                {
                    lable: '近一年',
                    value: 'lastYearRange',
                },

            ],
            options1: [
                {
                    lable: '三级以下',
                    value: '2',
                },
                {
                    lable: '三级以上',
                    value: '3',
                },
                {
                    lable: '四级以上',
                    value: '4',
                },
                {
                    lable: '五级以上',
                    value: '5',
                },
                {
                    lable: '六级以上',
                    value: '6',
                },
                {
                    lable: '七级以上',
                    value: '7',
                },
                {
                    lable: '八级以上',
                    value: '8',
                },
            ],
        }
    },
    created() {
        this.getList()
    },
    methods: {
        tableRowClassName({ row, rowIndex }) {
            if (Number(row.magnitude) >= 6) {
                return 'warning-row';
            }
            return '';
        },
        async getList() {
            const res = await getEarthquakeQuickReport(this.queryParams)
            if (res.code == 200) {
                this.earthquakeList = res.rows
                this.total = res.total
            }
        },
        // 获取时间
        getDateRange() {
            // 获取当前时间
            const today = moment();
            const lastWeekStart = today.subtract(7, 'days')
            // 上一个月的起止时间
            const lastMonthStart = today.clone().subtract(1, 'month').startOf('month');
            const lastMonthEnd = today.clone().subtract(1, 'month').endOf('month');
            // 近三月的起止时间
            const last3MonthsStart = today.clone().subtract(3, 'month').startOf('month');
            const last3MonthsEnd = today.clone().subtract(1, 'month').endOf('month');
            // 近半年的起止时间
            const last6MonthsStart = today.clone().subtract(6, 'month').startOf('month');
            const last6MonthsEnd = today.clone().subtract(1, 'month').endOf('month');
            // 近一年的起止时间
            const lastYearStart = today.clone().subtract(12, 'month').startOf('month');
            const lastYearEnd = today.clone().subtract(1, 'month').endOf('month');
            // 格式化日期字符串
            const format = 'x';
            const lastWeekRange = [lastWeekStart.format(format), moment().format(format)];
            const lastMonthRange = [lastMonthStart.format(format), lastMonthEnd.format(format)];
            const last3MonthsRange = [last3MonthsStart.format(format), last3MonthsEnd.format(format)];
            const last6MonthsRange = [last6MonthsStart.format(format), last6MonthsEnd.format(format)];
            const lastYearRange = [lastYearStart.format(format), lastYearEnd.format(format)];
            // 返回日期范围
            return {
                lastWeekRange,
                lastMonthRange,
                last3MonthsRange,
                last6MonthsRange,
                lastYearRange,
            };
        },

        handleQuery() {
            this.queryParams.pageNum = 1;
            if (this.queryParams.oritime) {
                let _date = this.getDateRange()[this.queryParams.oritime]
                this.queryParams.startTime = _date[0]
                this.queryParams.endTime = _date[1]
            } else {
                this.queryParams.startTime = null
                this.queryParams.endTime = null
            }
            this.getList()
        },
        resetQuery() {
            this.queryParams.startTime = null
            this.queryParams.endTime = null
            this.resetForm("queryForm");
            this.handleQuery();
        }
    }
}
</script>

<style>
#report {
    width: 100%;
    height: 100%;
    padding: 20px;
    position: relative;
    box-sizing: border-box;
}

.el-table .warning-row {
    /* background: linear-gradient(to right, #FFAAAA 0%, #ff4444 100%); */
    color: #ff4444;
}
</style>